@V100: 100%;
@V0: 0;
@P1: 1px;
@Cred: red;

#my-hairlines {
	.base(@height, @width, @background: @Cred) {
		position: absolute;
		content: '';
		background: @background;
		height: @height;
		width: @width;
	}

	.hairlines-transform(@scaleX, @scaleY) {
		-webkit-transform: scale(@scaleX, @scaleY);
		transform: scale(@scaleX, @scaleY);
		-webkit-transform-origin: @V0 @V0;
		transform-origin: @V0 @V0;
	}
}

.hairlines {
	position: relative;

	&-top::before {
		#my-hairlines.base(@P1, @V100);
		top: @V0;
	}

	&-bottom::before {
		#my-hairlines.base(@P1, @V100);
		bottom: @V0;
	}

	&-right::before {
		#my-hairlines.base(@V100, @P1);
		right: @V0;
	}

	&-left::before {
		#my-hairlines.base(@V100, @P1);
		left: @V0;
	}

	@media screen and (-webkit-min-device-pixel-ratio: 2) {
		&-top::before,
		&-bottom::before {
			#my-hairlines.hairlines-transform(1, 0.5);
		}

		&-right::before,
		&-left::before {
			#my-hairlines.hairlines-transform(0.5, 1);
		}
	}

	@media screen and (-webkit-min-device-pixel-ratio: 3) {
		&-top::before,
		&-bottom::before {
			#my-hairlines.hairlines-transform(1, 0.33);
		}

		&-right::before,
		&-left::before {
			#my-hairlines.hairlines-transform(0.33, 1);
		}
	}
}

.border-hairlines {
	position: relative;

	&::before {
		content: ' ';
		position: absolute;
		top: @V0;
		left: @V0;
		width: @V100;
		height: @V100;
		box-sizing: border-box;
		border: @P1 solid @Cred;
		border-radius: 4px;
	}

	@media screen and (-webkit-min-device-pixel-ratio: 2) {
		&::before {
			width: 200%;
			height: 200%;
			transform: scale(0.5);
			transform-origin: left top;
		}
	}

	@media screen and (-webkit-min-device-pixel-ratio: 3) {
		&::before {
			width: 300%;
			height: 300%;
			transform: scale(0.333);
			transform-origin: left top;
		}
	}
}
